<%extends"admin/base.html"%><%block content%>
<div class="layui-card">
    <div class="layui-card-header">关于我设置</div>
    <div class="layui-card-body">
        <div class="layui-form" wid100 lay-filter="">
            <% for item in aboutMe %>
         <div class="layui-form-item" id="form_item_<< item.id >>">
                <label class="layui-form-label label-del" data-index="<< item.id >>"><< item.content >></label>
                    <% if item.type==1 or item.type==4 %>
                <div class="layui-input-inline">
                  <input type="text" name="<< item.key >>" value="<< item.value >>" lay-verify="<< item.key >>" autocomplete="off" placeholder="请输入<< item.content >>" class="layui-input">
                </div>
                    <% elif item.type==2 %>
                <div class="layui-input-inline">
                    <input name="<< item.key >>" lay-verify="required" placeholder="图片地址" value="<< item.value >>" class="layui-input" id="photo_Src_<< item.id >>">
                </div>
             <div class="layui-input-inline layui-btn-container" style="width: auto;">
                  <button type="button" class="layui-btn layui-btn-primary photo_Upload" data-index="<< item.id >>">
                    <i class="layui-icon">&#xe67c;</i>上传图片
                  </button>
                  <button class="layui-btn layui-btn-primary avartatPreview" data-url="<< item.value >>">查看图片</button >
                </div>
                    <% else %>

                <div class="layui-input-block">
                    <textarea name="<< item.key >>" placeholder="请输入<< item.content >>" class="layui-textarea"><< item.value >></textarea>
                    </div>
                    <% endif %>
         </div>
            <% endfor %>
              <div class="layui-form-item">
                <div class="layui-input-block">
                  <button class="layui-btn" lay-submit lay-filter="setmyinfo">确认修改</button>
                    <button class="layui-btn layui-btn-normal" id="addModel">增加字段</button>
                </div>
              </div>
        </div>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-header">我的技能</div>
    <div class="layui-card-body">
        <div style="padding-bottom: 10px;">
            <button class="layui-btn layuiadmin-btn-tags" data-type="add">添加</button>
        </div>
        <table id="tool" lay-filter="tool"></table>
        <script type="text/html" id="app-tool-tagsbar">
            <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"></i>删除</a>
        </script>
        <script type="text/html" id="imgTpl"><img src="{{ d.toolImgSrc }}"/></script>
        <script type="text/html" id="percentTpl">
              <div class="layui-progress layuiadmin-order-progress layui-progress-big" lay-filter="progress-{{ d.Id }}">
            <div class="layui-progress-bar layui-bg-blue" lay-percent="{{ d.percent }}%" style="width:{{ d.percent }}%"><span class="layui-progress-text">{{ d.percent }}%</span></div>
          </div>
        </script>
    </div>
</div>
<%endblock%>
<%block script%>
    laydate.render({elem: '#birth_year',type:'year'});
    upload.render({
        url: "<< url_for('main.upload') >>?action=uploadimage",
        elem: ".photo_Upload",
        before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
             layer.load(); //上传loading
      }
      ,acceptMime: 'image/*'
      ,accept:'images'
      ,progress: function(n, elem){
        var percent = n + '%';//获取进度百分比
        element.progress('demo', percent); //可配合 layui 进度条元素使用
      }
       ,done: function(t) {
            item = this.item;
            index=item.data('index')
            1 == t.status ? $("#photo_Src_"+index).val(t.data.src) : layui.msg(t.msg, {
                icon: 5
            })
            layer.closeAll('loading'); //关闭loading
        }
        ,error: function(index, upload){
        layer.msg('网络异常');
        layer.closeAll('loading'); //关闭loading
      }
    });
    $(".avartatPreview").click(function(){
        var i = $(this).data('url');
        layer.photos({
            photos: {
                title: "查看头像",
                data: [{
                    src: i
                }]
            },
            shade: .01,
            closeBtn: 1,
            anim: 5
        });
    });
    form.on("submit(setmyinfo)", function(t) {
        var filed=t.field;
        $.ajax({
            url:'<< url_for("admin.AboutMe") >>',
            type:'post',
            data:filed,
            dataType:'json',
            success:function(res){
                if(res.status==1){
                  layer.msg('修改成功')
                }
                else{
                  layer.msg(res.msg);
                }
            }
        })
    });
    // 技能
    var active = {
        add: function(){
        layer.open({
          type: 2
          ,title: '添加分类'
          ,content: "<< url_for('admin.ToolAdd') >>"
          ,area: ['470px', '270px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
            submit.click();
          }
        });
      }
    }
    $('.layui-btn.layuiadmin-btn-tags').on('click', function(){
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
    });
    //执行渲染
    table.render({
      elem: '#tool', //指定原始表格元素选择器（推荐id选择器）
      url: "<< url_for('admin.ToolList') >>",
        page: !0,
        limit: 15,
        limits: [10, 15, 20, 25, 30],
        text: {
            none: '暂无相关数据',
            error:'对不起，加载出现异常！'
        },
        method:'post',
        cols: [[{field: "Id", width: 100, title: "Id", sort: !0},
            {field: "toolImgSrc",title: "技能图",minWidth: 100,align:'center', templet: "#imgTpl"},
            {field: "percent",title: "熟悉度",minWidth: 100,align:'center', templet: "#percentTpl"},
            {title: "操作", width: 150, align: "center", fixed: "right", toolbar: "#app-tool-tagsbar"}]]
    });
    table.on("tool(tool)", function (t) {
        var e = t.data;
        "del" === t.event ? layer.confirm("确定删除此文章？", function (er) {
            layer.close(er)
            $.ajax({
            url: "<< url_for('admin.ToolDel') >>",
            data:{Id:e.Id},
            success: function (returnData) {
                if (returnData.status == 1) {
                    table.reload('tool');
                    layer.msg('已删除，'+item.Id);
                    t.del()
                }
                else {
                    layer.msg(item.Id+'，'+returnData.info);
                }
             }
          });
        }) : "edit" === t.event && layer.open({
            type: 2,
            title: "编辑技能",
            content: "/admin/tool/edit/" + e.Id,
            maxmin: !0,
            area: ['470px', '270px'],
            btn: ["确定", "取消"],
            yes: function (e, i) {
                 var l = window["layui-layer-iframe" + e],
                a = i.find("iframe").contents().find("#layuiadmin-app-form-edit");
                a.click();
            }
        })
    })
    $('.label-del').click(function(){
        index=$(this).data('index');
        content=$(this).html();
        layer.confirm("确定删除该字段？", function (er) {
            layer.close(er)
            $.ajax({
                url: "<< url_for('admin.ModelDel') >>",
                data:{Id:index},
                success: function (returnData) {
                    if (returnData.status == 1) {
                        $('#form_item_'+index).remove()
                        layer.msg('已删除，'+content);
                    }
                    else {
                        layer.msg(content+'，'+returnData.info);
                    }
                }
            });
        })
    });
    $('#addModel').click(function(){
        layer.open({
          type: 2
          ,title: '添加字段'
          ,content: "<< url_for('admin.ModelAdd') >>"
          ,area: ['450px', '320px']
          ,btn: ['确定', '取消']
          ,yes: function(index, layero){
            var submit = layero.find('iframe').contents().find("#layuiadmin-app-form-submit");
            submit.click();
          }
        });
    });
    $('.layui-nav-child dd').removeClass('layui-this');
    $('#view_admin_about').addClass('layui-this');
    $('.layui-nav-tree li').removeClass('layui-nav-itemed');
    $('#admin_system_nav').addClass('layui-nav-itemed');
<% endblock %>